<!DOCTYPE html>
<html>
<head>

	<title>Leaflet.GridLayer.Vector.Slicer demo</title>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />

</head>
<body style='margin:0'>

	<div id="map" style="width: 100vw; height: 100vh"></div>

	<script type="text/javascript"  src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
	<script type="text/javascript"  src="https://unpkg.com/leaflet.vectorgrid@1.2.0"></script>
	<!-- <script type="text/javascript" src="../dist/Leaflet.VectorGrid.bundled.js"></script> -->
	<script>
		
		var map = L.map('map');

		var cartodbAttribution = '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

		var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
			attribution: cartodbAttribution,
			opacity: 1
		}).addTo(map);


		fetch('./eu-countries.topo.json').then(function(response){
			return response.json();
		}).then(function(json){

			console.log(json);

			var vectorGrid = L.vectorGrid.slicer( json, {
				rendererFactory: L.canvas.tile,
				vectorTileLayerStyles: {
					'eu-countries': function(properties, zoom) {
					console.log(properties);
						var p = properties.mapcolor7 % 5;
						return {
							fillColor: p === 0 ? '#800026' :
									p === 1 ? '#E31A1C' :
									p === 2 ? '#FEB24C' :
									p === 3 ? '#B2FE4C' : '#FFEDA0',
							fillOpacity: 0.5,
							//fillOpacity: 1,
							stroke: true,
							fill: true,
							color: 'black',
	 							//opacity: 0.2,
							weight: 2,
						}
					}
				}

			}).addTo(map);

			map.setView({ lat: 47.040182144806664, lng: 9.667968750000002 }, 0);

		});

	</script>
</body>
</html>
